<template>
    <!-- 添加或修改密码类型对话框 -->
    <el-dialog :close-on-click-modal="false" draggable :title="title" v-model="visible" width="500px" append-to-body>
      <el-form ref="bizPwdTypeRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="父级" prop="parentId">
          <el-tree-select
              v-model="form.parentId"
              :data="bizPwdTypeOptions"
              :props="{ value: 'id', label: 'name', children: 'children' }"
              value-key="id"
              placeholder="请选择上级"
              check-strictly
          />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="显示顺序" prop="orderNum">
          <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
</template>

<script setup name="BizPwdTypeAdd">
import {addBizPwdType, getBizPwdType, listBizPwdType, updateBizPwdType} from "@/api/biz/bizPwdType";
const {proxy} = getCurrentInstance();
const emit = defineEmits(["ok"]);
const props = defineProps({
  id: {
    type: [Number, String]
  },
  parentId: {
    type: [Number, String]
  }
});
watch(() => props.id, (newId) => {
  dataId.value = newId;
})
watch(() => props.parentId, (newParentId) => {
  parentId.value = newParentId||0;
})

const visible = ref(false);
const title = ref("");
const bizPwdTypeOptions = ref([]);
const parentId = ref(null);
const dataId = ref(null);

const data = reactive({
  form: {},
  queryParams: {
    name: null,
  },
  rules: {
    name: [
      {required: true, message: "名称不能为空", trigger: "submit"}
    ],
    orderNum: [
      {required: true, message: "显示顺序不能为空", trigger: "submit"}
    ],
  }
});

const {form, rules } = toRefs(data);

// 取消按钮
function cancel() {
  visible.value = false;
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    createTime: null,
    updateTime: null,
    deleted: null,
    parentId: null,
    name: null,
    ancestors: null,
    orderNum: null
  };
  proxy.resetForm("bizPwdTypeRef");
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["bizPwdTypeRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateBizPwdType(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          visible.value = false;
          emit("ok");
        });
      } else {
        addBizPwdType(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          visible.value = false;
          emit("ok");
        });
      }
    }
  });
}
function getTreeselect() {
  listBizPwdType().then(response => {
    bizPwdTypeOptions.value = [];
    const data = { id: 0, name: '顶级节点', children: [] };
    data.children = proxy.handleTree(response.data, "id", "parentId");
    bizPwdTypeOptions.value.push(data);
  });
}
// 显示弹框
function show() {
  visible.value = true;
  getTreeselect();
  reset();
  if(dataId.value){
    getBizPwdType(dataId.value).then(response => {
      form.value = response.data;
      title.value = "修改密码分类";
    });
  }else{
    title.value = "添加密码分类";
    form.value.parentId = parentId.value||0;
  }
}
defineExpose({
  show,
});

</script>
